<script setup>
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { computed, ref } from 'vue'
	import { useUserStore } from '@/store/user'
	import { getCouponTotal } from '@/api/user'
	
	const user = useUserStore()
	const config = getApp().globalData.config
	const contHeight = ref(66)
	const couponNum = ref(0)
	const orderNavList = ref([
		{img: 'https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-02-14/1739508312222_order-0.png', title: "待付款"},
		{img: 'https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-02-14/1739508330269_order-1.png', title: "待收货"},
		{img: 'https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-02-14/1739508352100_order-3.png', title: "退款/售后"},
		{img: 'https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-02-14/1739508359220_order-4.png', title: "全部订单"},
	])
	const funcNavList = computed(() => {
		let fixedFunc = [
			{name: 'star', title: "商品收藏", route: '/pages/user/collect'},
			{name: 'map', title: "地址管理", route: '/pages/user/addressList'},
			{name: 'kefu-ermai', title: "联系客服", route: ''},
			{name: 'setting', title: "设置", route: '/pages/user/set'},
			{name: 'https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-02-14/1739512155657_complaint-icon.png', 
				title: "投诉/建议", route: ''}
			// {name: 'https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-02-14/1739512180217_demand-icon.png', title: "需求单",
			// 	route: '/pages/user/demand'},
			// {name: 'https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-02-14/1739512190776_points-icon.png', title: "积分商城",
			// 	route: '/pages/user/points'}
		]
		if(user.permissions.includes('system:driver:delivery') || user.permissions.includes('*:*:*')) {
			fixedFunc.push({
				name: 'https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-02-27/1740623453727_delivery-icon.png',
					title: "订单派送", route: '/delivery/pages/task'
			})
		}
		return fixedFunc
	})
	
	
	function couponTotal() {
		getCouponTotal().then(res => {
			couponNum.value = res.result || 0
			user.getInfoAction()
		})
	}
	function openPage(url) {
		if(url) uni.navigateTo({url})
		else uni.showToast({icon: 'none',title: '敬请期待！'})
	}
	function handleLogin() {
		if(!user.userId) {
			uni.navigateTo({ url: '/pages/login' })
		}
	}
	
	onLoad(() => {
	  // #ifdef MP-WEIXIN
	  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
	  contHeight.value = menuButtonInfo.bottom + 12
	  // #endif
	})
	onShow(() => {
		if(user.userId) {
			couponTotal()
		}
	})
	
</script>

<template>
	<view class="app-container" :style="{ paddingTop: contHeight + 'px' }">
		<view class="app-head">
			<uv-avatar :src="user.avatar && user.avatar.furl" size="124" :custom-style="{border: '4rpx solid #FF9D7C', overflow: 'hidden'}"></uv-avatar>
			<view class="info-box" @click="handleLogin">
				<view class="name uv-line-1">{{user.userId? user.nickname || '未设置' : '未登录'}}</view>
				<template v-if="user.userId">
					<view class="points uv-line-1">我的积分：{{user.points || 0}}分</view>
				</template>
				<view v-else class="points">登录享受爆款特价</view>
			</view>
			<view class="other-box theme-btn">
				<!-- <uv-button v-if="user.userId" shape="circle" text="签到" size="small" :custom-style="{width: '132rpx', background: '#ffffff', border: '2rpx solid #FF9D7C'}" @click="openPage('')"></uv-button> -->
			</view>
		</view>
		<view class="app-content">
			<view class="coupon-box" @click="openPage('/pages/user/coupon')">
				<view class="coupon-left">
					<uv-image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-02-14/1739503586995_coupon-icon.png" width="40" height="28"></uv-image>
					<view>优惠券<text v-if="couponNum">(<text class="left-num">{{couponNum}}</text>)</text></view>
				</view>
				<uv-icon name="arrow-right" color="#54504D" size="36" bold />
			</view>
			<view class="order-box">
				<view class="order-grid">
					<view class="grid-item" v-for="(item, index) in orderNavList" :key="item.title" @click="openPage('/pages/shop/orderAll?status='+index)">
						<uv-image :src="item.img" width="56" height="56"></uv-image>
						<text>{{item.title}}</text> 
					</view>
				</view>
				<!-- <view class="order-list">
					<swiper class="order-swiper" :interval="2000">
						<swiper-item v-for="(item, index) in 4" :key="index" class="order-tip">
							<view class="order-tip">
								<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" width="96" height="96"></uv-image>
								<view class="tip-info">
									<view class="tip-title uv-line-1">4件商品待提货</view>
									<view class="tip-text uv-line-1"><text class="tip-time">16点后</text>可前往提货点提货</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view> -->
			</view>
			<view class="nav-box">
				<view class="nav-title">我的服务</view>
				<view class="nav-func">
					<template v-for="item in funcNavList" :key="item.title">
						<button class="uv-reset-button func-item" open-type="contact" v-if="item.title === '联系客服'" >
							<uv-icon :name="item.name" color="#666666" size="56"></uv-icon>
							<text>{{item.title}}</text>
						</button>
						<button class="uv-reset-button func-item" open-type="feedback" v-else-if="item.title === '投诉/建议'">
							<uv-icon :name="item.name" color="#666666" size="56"></uv-icon>
							<text>{{item.title}}</text>
						</button>
						<view v-else class="func-item" @click="openPage(item.route)">
							<uv-icon :name="item.name" color="#666666" size="56"></uv-icon>
							<text>{{item.title}}</text>
						</view>
					</template>
				</view>
			</view>
			<view class="ad-box">
				<view class="ad-logo"><view class="logo-left">本地食材本地菜</view><view class="logo-right">本地厨师人人爱</view></view>
				<view class="ad-info">
					<view class="ad-text"><uv-icon name="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-02-14/1739513078951_quote-icon.png" size="24"></uv-icon><text>平台报价</text></view>
					<view class="ad-text"><uv-icon name="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-02-14/1739513106743_safe-icon.png" size="24"></uv-icon><text>48小时质量无忧</text></view>
					<view class="ad-text"><uv-icon name="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-02-14/1739513116287_speed-icon.png" size="24"></uv-icon><text>极速退款</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		background-image: url(https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-02-14/1739499287510_mine-bg.png);
		background-size: 100% 800rpx;
		background-repeat: no-repeat;
		min-height: 800rpx;
		.app-head{
			margin: 0 32rpx;
			display: flex;
			align-items: center;
			gap: 20rpx;
			.info-box{
				width: calc(100% - 148rpx - 136rpx);
				.name{
					font-weight: 600;
					font-size: 40rpx;
					line-height: 48rpx;
				}
				.points{
					margin-top: 16rpx;
					color: #54504D;
				}
			}
			.other-box{
				width: 136rpx;
				display: flex;
				font-weight: 600;
			}
		}
		.app-content{
			margin-top: 48rpx;
			padding: 0 24rpx;
			.coupon-box{
				padding: 26rpx 32rpx;
				background-color: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 20rpx;
				.coupon-left{
					display: flex;
					align-items: center;
					gap: 16rpx;
					.left-num{
						color: #FF0D0D;
					}
				}
			}
			.order-box{
				margin-top: 16rpx;
				padding: 24rpx;
				background-color: #FFFFFF;
				border-radius: 16rpx;
				.order-grid{
					display: flex;
					justify-content: space-between;
					.grid-item{
						width: 128rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: 20rpx;
						font-size: var(--theme-sm);
						line-height: var(--theme-sm-line);
					}
				}
				.order-list{
					margin-top: 24rpx;
					position: relative;
					&::before{
						content: '';
						position: absolute;
						top: -16rpx;
						left: 224rpx;
						z-index: 10;
						border-left: 16rpx solid transparent;
						border-right: 16rpx solid transparent;
						border-bottom: 16rpx solid  #F8F8F8;
					}
				}
				.order-swiper{
					height: 128rpx;
				}
				.order-tip{
					padding: 16rpx;
					display: flex;
					align-items: center;
					gap: 34rpx;
					background-color: #F8F8F8;
					border-radius: 16rpx;
					.tip-info{
						.tip-title{
							font-weight: 600;
						}
						.tip-text{
							color: #54504D;
						}
						.tip-time{
							color: #FF0D0D;
						}
					}
				}
			}
			.nav-box{
				margin-top: 24rpx;
				padding: 24rpx;
				background-color: #FFFFFF;
				border-radius: 16rpx;
				.nav-title{
					font-weight: 600;
					font-size: var(--theme-lg);
					line-height: var(--theme-lg-line);
				}
				.nav-func{
					padding-top: 32rpx;
					display: flex;
					flex-wrap: wrap;
					gap: 24rpx 48rpx;
					.func-item{
						margin: 0;
						width: 126rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: 16rpx;
						font-size: var(--theme-sm);
						line-height: var(--theme-sm-line);
					}
				}
			}
			.ad-box{
				margin-top: 120rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 24rpx;
				font-weight: 600;
				font-size: var(--theme-sm);
				line-height: var(--theme-sm-line);
				.ad-logo{
					display: flex;
					gap: 8rpx;
					background-color: #EBE8E8;
					color: #FFFFFF;
					border-radius: 24rpx 0 24rpx 0;
					.logo-left{
						padding: 0 12rpx;
						background-color: #E4DFDE;
						border-radius: 24rpx 0 24rpx 0;
					}
					.logo-right{
						padding-right: 12rpx;
					}
				}
				.ad-info{
					display: flex;
					gap: 30rpx;
					align-items: center;
					.ad-text{
						display: flex;
						align-items: center;
						gap: 8rpx;
						color: #E4DFDE;
					}
				}
			}
		}
	}
</style>